<template>
  <div class="app-container">
    <div class="operator-container">
      <el-button icon="el-icon-plus" type="primary" @click="clickToEditAccount" class="operator-item"  size="small">新增用户</el-button>
    </div>
    <table-list :data="accountList">
      <template slot="columns">
        <el-table-column fixed="left" label="ID" align="center">
          <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>
        <el-table-column label="用户名" align="center">
          <template slot-scope="scope">
            {{ scope.row.account }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.createTime }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button plain type="primary" size="mini" @click="clickToEditAccount(scope.row)">编辑</el-button>
            <el-button plain type="danger" size="mini" @click="clickToDeleteAccount(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </template>
    </table-list>
    <list-pagination :total="total" :page="page" :pageSize="pageSize" :handleSizeChange="handleSizeChange" :handleCurrentChange="handleCurrentChange"></list-pagination>
    <!-- 新增编辑 -->
    <el-dialog :title="accountDialogTitle" :visible="accountDialogVisible" width="400px" @close="clickCloseAccountDialog">
      <el-form autoComplete="off" :model="accountForm" :rules="accountRules" ref="accountForm" label-position="right" label-width="80px">
        <el-form-item prop="account" label="用户名：" class="filter-item">
          <el-input placeholder="请输入用户名" clearable size="medium" v-model="accountForm.account" class="edit__input" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码：">
          <el-input placeholder="请输入密码" clearable size="medium" v-model="accountForm.password" type="password" class="edit__input" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="clickCloseAccountDialog" size="small">取 消</el-button>
        <el-button type="primary" @click="clickSaveAccount" size="small">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import list from '@/mixins/List'
import table from '@/components/Table'
import listPagination from '@/components/ListPagination'
import { getAccountList, delAccount, updateAccount, insertAccount } from '@/api/account'

export default {
  name: 'productList',
  components: {
    'table-list': table,
    listPagination
  },
  mixins: [list],
  extends: {},
  props: {},
  data () {
    return {
      accountDialogTitle: '新增账户',
      accountList: [],
      accountDialogVisible: false,
      accountForm: {
        id: '',
        account: '',
        password: ''
      },
      accountRules: {
        account: [
          {
            required: true,
            trigger: 'blur',
            validator: (rule, value, callback) => {
              if (value.length === 0) {
                callback(new Error('不能为空'))
              } else if (value.length > 20) {
                callback(new Error('用户名最多20个字符'))
              } else {
                callback()
              }
            }
          }
        ],
        password: [
          {
            required: true,
            trigger: 'blur',
            validator: (rule, value, callback) => {
              if (value.length === 0) {
                callback(new Error('不能为空'))
              } else if (value.length > 20) {
                callback(new Error('密码最多20个字符'))
              } else {
                callback()
              }
            }
          }
        ]
      }
    }
  },
  computed: {},
  directives: {},
  filters: {},
  created () {},
  mounted () {
    this.getList()
  },
  watch: {},
  methods: {
    async getList () {
      let { data } = await getAccountList({
        pageNo: this.page,
        pageSize: this.pageSize
      })
      this.accountList = data.dataList
      this.total = data.total
    },
    clickToEditAccount ({ id, account }) {
      if (id) {
        this.accountDialogTitle = '编辑账户信息'
        this.accountForm.id = id
        this.accountForm.account = account
        this.accountForm.password = ''
      } else {
        this.accountDialogTitle = '新增账户信息'
        this.accountForm.id = ''
        this.accountForm.account = ''
        this.accountForm.password = ''
      }
      this.accountDialogVisible = true
    },
    clickToDeleteAccount ({ id }) {
      this.$confirm('此操作将永久删除该账户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await delAccount({ sellerId: id })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    clickCloseAccountDialog () {
      this.accountDialogVisible = false
      this.$nextTick(() => {
        this.$refs['accountForm'].clearValidate()
      })
    },
    clickSaveAccount () {
      this.$refs.accountForm.validate(async valid => {
        if (valid) {
          if (this.accountForm.id) {
            await updateAccount({
              sellerId: this.accountForm.id,
              account: this.accountForm.account,
              password: this.accountForm.password
            })
            this.$message({
              type: 'success',
              message: '修改账户成功!'
            })
          } else {
            await insertAccount({
              account: this.accountForm.account,
              password: this.accountForm.password
            })
            this.$message({
              type: 'success',
              message: '新增账户成功!'
            })
          }
          this.getList()
          this.accountDialogVisible = false
          this.$nextTick(() => {
            this.$refs['accountForm'].clearValidate()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.edit__input {
  display: inline-block;
  width: 250px;
}
</style>
